<template>
  <div class="container">
    <mt-header fixed title="新增维保">
      <span slot="left" @click="goback">
        <mt-button>
          <img src="../../assets/fh.png" alt="后退">
        </mt-button>
      </span>
    </mt-header>
    <div class="star_add">
      <ul>
        <li>
          <label>故障站点：</label>
          <select v-model="seleted1">
            <option v-for="(i1,i2) in lists" :key="i2">{{i2}}</option>
          </select>
          <select v-model="seleted2">
            <option v-for="(i1,i2) in lists[seleted1]" :key="i2">{{i2}}</option>
          </select>
          <select v-model="seleted3">
            <option v-for="(i1,i2) in lists[seleted1][seleted2]" :key="i2">{{i2}}</option>
          </select>
        </li>
        <li class="question">
          <label>故障分类：</label>
          <select>
            <option v-for="item in question" :key="item">{{item}}</option>
          </select>
        </li>
        <li>
          <label>问题描述：</label>
          <textarea></textarea>
        </li>
        <li class="upimg">
          <label>上传文件</label>
          <div class="up_content">
            <input
              @change="fileChange($event)"
              type="file"
              id="upload_file"
              multiple
              style="display: none"
            >
            <div class="add" @click="chooseType">
              <div class="add-image" align="center">
                <p>
                  <img src="../../assets/addimg.png" alt="添加">
                </p>
              </div>
            </div>
            <div class="add-img" v-show="imgList.length">
              <dl class="img-list">
                <dd v-for="(url,index) in imgList" :key="index">
                  <img class="del" src="../../assets/icon_close.png" @click.stop="delImg(index)">
                  <img :src="url.file.src" class="showimg">
                </dd>
              </dl>
            </div>
          </div>
        </li>
      </ul>
      <button type="button" class="mui-btn mui-btn-primary">确认</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists: {
        高新区: {
          站点一: {
            高机组一: "g-1-机组一",
            高机组二: "机组二",
            机组三: "机组三"
          },
          高站点二: {
            高二: "g-2-机组一",
            机组二: "机组二",
            机组三: "机组三"
          },
          站三: {
            站三: "g-2-机组一",
            机组二: "机组二",
            机组三: "机组三"
          }
        },
        桥西区: {
          站点一: {
            西机组一: "西机组一",
            机组二: "机组二",
            机组三: "机组三"
          },
          站点二: {
            机组一: "机组一",
            机组二: "机组二",
            机组三: "机组三"
          }
        }
      },
      seleted1: "高新区",
      seleted2: "站点一",
      seleted3: "高机组一",
      question: ["没有水", "没有电", "没续费", "没有大与"],
      //下面的为图片上传参数
      showFace: false,
      imgList: [],
      size: 0,
      limit: 3, //限制图片上传的数量
      tempImgs: []
    };
  },
  methods: {
    goback() {
      // 点击后退
      this.$router.go(-1);
    },
    chooseType() {
      document.getElementById("upload_file").click();
    },
    fileChange(el) {
      if (!el.target.files[0].size) return;
      this.fileList(el.target);
      el.target.value = "";
    },
    fileList(fileList) {
      let files = fileList.files;
      for (let i = 0; i < files.length; i++) {
        //判断是否为文件夹
        if (files[i].type != "") {
          this.fileAdd(files[i]);
        } else {
          //文件夹处理
          this.folders(fileList.items[i]);
        }
      }
    },
    //文件夹处理
    folders(files) {
      let _this = this;
      //判断是否为原生file
      if (files.kind) {
        files = files.webkitGetAsEntry();
      }
      files.createReader().readEntries(function(file) {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            _this.foldersAdd(file[i]);
          } else {
            _this.folders(file[i]);
          }
        }
      });
    },
    foldersAdd(entry) {
      let _this = this;
      entry.file(function(file) {
        _this.fileAdd(file);
      });
    },
    fileAdd(file) {
      if (this.limit !== undefined) this.limit--;
      if (this.limit !== undefined && this.limit < 0) return;
      //总大小
      this.size = this.size + file.size;
      //判断是否为图片文件
      if (file.type.indexOf("image") == -1) {
        this.$dialog.toast({ mes: "请选择图片文件" });
      } else {
        let reader = new FileReader();
        let image = new Image();
        let _this = this;
        reader.readAsDataURL(file);
        reader.onload = function() {
          file.src = this.result;
          image.onload = function() {
            let width = image.width;
            let height = image.height;
            file.width = width;
            file.height = height;
            _this.imgList.push({
              file
            });
            console.log(_this.imgList);
          };
          image.src = file.src;
        };
      }
    },
    delImg(index) {
      this.size = this.size - this.imgList[index].file.size; //总大小
      this.imgList.splice(index, 1);
      if (this.limit !== undefined) this.limit = 3 - this.imgList.length;
    },
    displayImg() {}
  },
  watch: {
    seleted1: function(cur, old) {
      for (var i in this.list[cur]) {
        break;
      }
      this.seleted2 = i;
    },
    seleted2: function(cur, old) {
      for (var i in this.list[this.seleted1][cur]) {
        break;
      }
      this.seleted3 = i;
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
    height: 100%;
  background: #fff;
  padding: 0.20rem 0.10rem;
  padding-top: 0.7rem;
}
.star_add {
  padding: 0.10rem 0.04rem;
  border-radius: 0.05rem;
  border: 1px solid #7f8fc3;
  background: #fff;
  ul {
    padding: 0;
    margin: 0;
    li {
      display: flex;
      color: #000;
      justify-content: space-between;
      align-items: flex-start;
      flex-direction: row;
      margin-bottom: 0.20rem;
      label {
        font-size: 0.12rem;
        width: 23%;
        text-align: left;
      }
      select {
        margin: 0px 1%;
        width: 25%;
        padding: 0.04rem 0.10rem;
        color: #000;
        padding-right: 0.15rem;
        border: 1px solid #7e8ec2 !important;
        border-radius: 0.05rem;
        background: url("../../assets/sanjiao.png") no-repeat 98% center;
      }
      textarea {
        width: 77%;
        font-size: 0.14rem;
        height: 1rem;
        padding: 0.10rem;
      }
    }
    .question {
      select {
        margin: 0;
        width: 77%;
      }
    }
    .upimg {
      justify-content: flex-start;
    }
  }
  .mui-btn-primary{
      width: 50%;
      padding: 0.10rem 0.12rem;
      border-radius: 0.10rem;
  }
}
//图片上传
.up_content{
  width: 77%;
}
.add-image{
 text-align: left;
 justify-content:flex-start;
}
.add-image img {
  width: 0.50rem;
  height: 0.50rem;
}
/*图片列表*/
.img-list {
  overflow: hidden;
  display: flex;
  margin: 0;
  justify-content: flex-start;
}

.img-list > dd {
  margin: 0;
  width: 33%;
  padding: 0.04rem;
  box-sizing: border-box;
  position: relative;
  border: 1px solid #ccc;
  margin-right: 0.10rem;
}
.img-list > dd .showimg {
  width: 100%;
}

.img-list > dd > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.del {
  position: absolute;
  width: 0.18rem;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>